<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title i18n="installedtitle"></title>
    <link rel="stylesheet" href="index.css"/>
    <script src="../../jquery/jquery.min.js"></script>
    <script src="../../port.js"></script>
    <script src="../../functions.js"></script>
  </head>
  <body>
    <div id="header">
      <h1 i18n="now_you_have_adblock_hooray"></h1>
      <span i18n="any_new_tabs_you_open_Will_be_automatically_ad_free"></span>
    </div>

    <div id="wrapper"> <!-- Cards slide within this guy. -->
      <!-- 
        For the curious: in tests, non-technical users are confused by
        AdBlock installing instantaneously, and tend to ignore the
        installation page if it flashes up the instant they install.
        So we delay 3 seconds while they get their bearings.
      -->
      <div id="loading-wrapper">
        <div class="card" id="loading">
          <i i18n="installing_adblock"></i>
          <strong><i id="done" i18n="done" style="display:none"></i></strong>
          <br/><br/>
          <progress id="chrome-loading-progress" value=0 max=1>
            <div id="safari-loading-progress"></div>
          </progress>
        </div>
        <div id="cleaner-warning">
          <a href="#" i18n="seeing_this_every_time_you_start_your_browser"></a>
        </div>
      </div>

      <div class="card" id="start-chrome">
        <h2 i18n="set_up_adblock"></h2>
        <span i18n="please_fill_out_adblocks_one_question_setup"></span><br/><br/>
        <input type="checkbox" id="showads" />
        <label for="showads" i18n="i_like_googles_text_ads_dont_block_those"></label>
        <div class="nav">
          <a href="#" name="howto" class="left"><span i18n="that_was_easy"></span> &gt;&gt;</a>
        </div>
      </div>

      <div class="card" id="start-safari">
        <h2 i18n="lets_get_you_set_up"></h2>
        <p i18n="first_turn_on_autoupdate_to_get_bugfixes_as_i_write_them"></p>
        <p i18n="turning_on_autoupdate_is_really_important"></p>
        <div class="nav">
          <a href="#" name="autoupdate-howto" class="down" i18n="show_me_how"></a>
          <a href="#" name="howto" class="left"><span i18n="ok_autoupdate_is_on"></span> &gt;&gt;</a>
        </div>
      </div>

      <div class="card" id="autoupdate-howto">
        <img src="autoupdate.png" style="float:right; margin-left: 20px; margin-bottom: 30px;">
        <h2 i18n="to_turn_on_autoupdate"></h2>
        <ol>
          <li i18n="click_safari_prefs"></li>
          <li i18n="click_extensions"></li>
          <li i18n="click_updates"></li>
          <li i18n="click_install_update_automatically"></li>
        </ol>
        <br/>
        <div class="nav">
          <a href="#" name="howto" class="left"><span i18n="ok_autoupdate_is_on"></span> &gt;&gt;</a>
        </div>
      </div>

      <div class="card" id="howto">
        <h2 i18n="how_to_use_adblock"></h2>
        <p i18n="adblock_auto_removes_ads_thats_all"></p>
        <p i18n="for_more_options_right_click"></p>
        <div class="nav">
          <a class="left" name="last-step" href="#"><span i18n="ok_now_what"></span> &gt;&gt;</a>
        </div>
      </div>

      <div class="card" id="last-step">
        <div id="iframe-slot">
          <!-- Replaced by an iframe if it loads. -->
          <div style="width: 500px">
            <h2>That's it!</h2>
            You can close this tab and begin browsing ad-free.  Have fun!
          </div>
        </div>

      </div> <!-- card -->
    </div>
    <script src="index.js"></script>
  </body>
</html>

